<style lang="less">
  #danti-house-index {
    background: #3d3936 url(~@/assets/pcindex_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .danTiList {
      background: #fff;
      position: relative;
      min-height: 420px;
      .content {
        width: 1190px;
        margin: 0 auto;
        padding-bottom: 3em;
        display: flex;
        justify-content: space-between;
        .main {
          width: 800px;
          .item-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 0 3em 0;
            .item {
              width: 100%;
              padding: 5px;
              .item-content {
                border: solid 1px #eee;
                background: #f9f9f9;
                font-size: 120%;
                display: flex;
                color: #333;
                line-height: 180%;
              }
              h2 {
                color: #555;
                font-weight: bold;
                margin-top: 12px;
                margin-bottom: 7px;
              }
              .desc {
                font-weight: bold;
              }
              img {
                width: 250px;
                height: 220px;
                margin: 5px 12px 5px 5px;
                display: block;
              }
              .info {
                overflow: hidden;
                line-height: 30px;
                flex: 1 1 0;
                margin-left: 1.5em;
                > * {
                  white-space: nowrap;
                  overflow: hidden;
                  min-width: 0;
                  -ms-text-overflow: ellipsis;
                  text-overflow: ellipsis;
                }
                em {
                  font-style: normal;
                }
              }
            }
            &:after {
              content: "";
              width: 50%;
            }
          }
        }
      }
      .pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
</style>
<template>
  <div id="danti-house-index">
    <Navigator></Navigator>
    <div class="search">
      <GlobalSearchInput tab="danti"></GlobalSearchInput>
    </div>
    <FilterCategory :list="filters" @change="changeFilter"></FilterCategory>
    <div class="danTiList">
      <div class="content" v-if="contentList.length<1">{{spinShow ? '搜索中...' : '暂无符合条件的楼盘。'}}</div>
      <Spin size="large" fix v-if="spinShow"></Spin>
      <div class="content">
        <div class="main">
          <div class="item-wrapper">
            <div class="item" v-for="item in contentList">
              <div class="item-content">
                <router-link class="link" :to="{name:'danTiDetail', params:{ id: item.houseNumber }}">
                  <img :src="item.coverPic" alt="">
                </router-link>
                <div class="info">
                  <h2>
                    <router-link class="link" :to="{name:'danTiDetail', params:{ id: item.houseNumber }}">
                      {{item.firstDescribe}}
                    </router-link>
                  </h2>
                  <p>编号：{{item.houseNumber}}</p>
                  <em>租金：{{item.priceRange}}元</em>
                  <p>面积：{{item.totalArea}}平方米</p>
                  <p>类型：<span v-text="item.rentAll ? '整租' : '合租'"></span></p>
                  <p>电话：{{item.phone}}</p>
                  <p>地址：{{item.address}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <Page v-if="showPage"
                  :total="totalCount"
                  :pageSize="pageSize"
                  :current="currentPage"
                  @on-change="changePagination"></Page>
          </div>
        </div>
        <div class="sidebar">
          <RecommendSourceForNewHouse></RecommendSourceForNewHouse>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'

  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      FilterCategory: require('@/components/FilterCategory.vue'),
      RecommendSourceForNewHouse: require('@/components/RecommendSourceForNewHouse.vue'),
      Share: require('@/components/share.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keywords: '',
        params: {},
        spinShow: false,
        contentList: [],
        filters: require('./filter.config').default,
        totalCount: 0,
        currentPage: 1,
        pageSize: 12,
        showPage: false
      }
    },
    methods: {
      changeFilter (params) {
        this.params = params
        this.search()
      },
      changePagination (num) {
        this.currentPage = num
        this.search()
      },
      search () {
        this.spinShow = true
        this.contentList = []
        // 如果搜索条件为空，则显示推荐数据，需要显示分页
        this.showPage = this.searchParamsIsEmpty
        if (this.searchParamsIsEmpty) {
          api.danTiSource(this.currentPage).then((res) => {
            this.spinShow = false
            this.totalCount = res.data.totalPage * 12
            this.contentList = res.data.content
            setTimeout(() => {
              document.body.scrollTop = 0
            }, 0)
          }).catch(() => {
            this.spinShow = false
          })
        } else {
          // 否则调用另外一个借口
          api.danTiSearch(this.params).then((res) => {
            this.spinShow = false
            this.contentList = res.data.content
          }).catch(() => {
            this.spinShow = false
          })
        }
      }
    },
    computed: {
      // 返回布尔值，判断是否搜索参数是否均为空
      searchParamsIsEmpty () {
        return Object.keys(this.params).every((key) => {
          return this.params[key] === ''
        })
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

